<template>
	<div class="left">
		<i class="EachApp EachApp_chexiao back" @click="router.back();"></i>&nbsp;&nbsp;
		<span class="icons" @click="handleBtn('pre')"><i class="EachApp EachApp_you"></i></span>
		<span class="icons" @click="handleBtn('next')"><i class="EachApp EachApp_zuo"></i></span>&nbsp;&nbsp;
		<div class="page">
			<i class="EachApp EachApp_jihui page-icon"></i>
			<a-input-number v-model="currentIndex" size="mini" @keyup.enter="$event.target.blur()" @blur="handleBlur" @input="handleChangeIndex"
			@focus="isFocused = true" :min="1" :max="listTotal" :style="{ 'width': `${iptWidth}px`, 'padding': isFocused ? '0 4px' : '0' }"/>
			/{{ listTotal }}
		</div>
	</div>
	<div class="right">
		<span class="icons" @click="handleBtn('add')"><i class="EachApp EachApp_a-tianjia"></i></span>
		<span class="icons" @click="handleBtn('collection')"><i class="EachApp EachApp_shoucang"></i></span>
		<span class="icons" @click="handleBtn('more')"><i class="EachApp EachApp_gengduo1"></i></span>
		<slot name="right"></slot>
	</div>
</template>
<script lang="ts" setup>
const props = defineProps({
	listIndex: { required: true, type: Number, default: () => { return 1 }  },// 当前条数
    listTotal: { required: true, type: Number, default: () => { return 100 } },// 总条数
})
const router = useRouter();
const emit = defineEmits(['handleTop']);
const currentIndex = ref(0);
const iptWidth = ref(20);
const isFocused = ref(false); // 是否聚焦
watch(() => props.listIndex, e => {
	currentIndex.value = e;
},{ immediate: true })
// 按钮操作
const handleBtn = (type) => {
    console.log("type ===", type);
    emit('handleTop', type);
}
// 失焦触发
const handleBlur = (e) => {
    console.log("e ===", e.target.value);
	isFocused.value = false;
}

// 修改当前排序
const handleChangeIndex = (e) => {
	console.log('e===123', e, typeof e);
	if(e < 100){
		iptWidth.value = 24;
	}else if(e >= 100 && e < 1000){
		iptWidth.value = 30;
	}else if(e >= 1000){
		iptWidth.value = 35;
	}
}
</script>